<template>
    <i style="display: inline-block">
        <Icon
                v-if="checkIcon(type) == 'icon'"
                :type="type"
                :size="size"
                :color="color"
        />
        <Icon
                v-if="checkIcon(type) == 'iconfont'"
                :custom="type"
                :size="size"
                :color="color"
        />
        <img
                v-if="checkIcon(type) == 'link'"
                :src="type"
                :width="size + 'px'"
                :height="size + 'px'"
                style="vertical-align: -0.125em"
        />
    </i>
</template>

<script>
    export default {
        name: "x-icon",
        props: {
            type: String,
            size: {
                type: [Number, String],
                default: 14,
            },
            color: String,
        },
        data() {
            return {};
        },
        methods: {
            checkIcon(v) {
                if (!v) {
                    return "null";
                }
                if (
                    v.indexOf("http://") == 0 ||
                    v.indexOf("https://") == 0 ||
                    v.indexOf(";base64,") > 0
                ) {
                    return "link";
                } else if (v.indexOf("iconfont") > -1) {
                    return "iconfont";
                } else {
                    return "icon";
                }
            },
        },
        watch: {},
        mounted() {
        },
    };
</script>

